<template>
  <div>
    <ExpandOutlined class="screenfull-svg" @click="click" />

    <!--<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />-->
  </div>
</template>

<script lang="ts" setup name="login">
import screenfull from "screenfull";
import { onMounted, reactive, ref, unref, watchEffect } from "vue";
let isFullscreen = ref<boolean>(false);
onMounted(() => {
  init();
});
onUnmounted(() => {
  destroy();
});
function click() {
  if (!screenfull.enabled) {
    return false;
  }
  screenfull.toggle();
}
function change() {
  isFullscreen.value = screenfull.isFullscreen;
}
function init() {
  if (screenfull.enabled) {
    screenfull.on("change", change);
  }
}
function destroy() {
  if (screenfull.enabled) {
    screenfull.off("change", change);
  }
}
</script>

<style scoped>
.screenfull-svg {
  cursor: pointer;
  fill: #5a5e66;
  font-size: 18px;
}
</style>
